<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <style>
        body {font-family: Arial, Helvetica, sans-serif; margin:20px;}
        table {border-collapse: collapse; width: 100%;}
        th, td {border: 1px solid #ddd; padding: 8px; text-align: left;}
        th {background-color: #f2f2f2;}
        #msg {margin: 10px 0; color: #555;}
        button {margin: 2px;}
    </style>
</head>
<body>
<h1>主页</h1>
<p>this is a html page</p>

<!-- 搜索框 -->
<label>搜索: <input type="text" id="searchInput" name="empno" placeholder="输入员工编号"></label>
<input type="button" value="搜索" id="searchBtn">

<!-- 错误/提示信息 -->
<div id="msg"></div>

<!-- 用来放表格的容器 -->
<div id="showDate"></div>
<a href="/add.html">添加员工</a>

<!-- 引入 axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    // --------- 1️⃣ 统一的请求函数 ----------
    /**
     * 向后端请求员工列表
     * @param {string} empno 可选的搜索关键字（空字符串表示不筛选）
     * @returns {Promise<Object[]>} 返回的是业务层的数组（每个元素是一个员工对象）
     */
    function fetchEmployeeList(empno = '') {
        const url = '/all/list' + (empno ? '?empno=' + encodeURIComponent(empno) : '');
        return axios.get(url)
            .then(resp => {
                if (resp.data.code !== 2000) {
                    throw new Error('业务错误：' + (resp.data.msg || '未知错误'));
                }
                return resp.data.data;
            });
    }

    /**
     *  删除员工。
     *  @param {number} empno  需要删除的员工工号
     */
    function deleteEmployee(empno){
        return  axios.get('/delete',{ // 假设 /delete 接口接受 empno 作为查询参数
            params:{
                empno:empno
            }
        }).then(response => {
            if(response.data.code !== 2000){
                throw new Error("删除失败：" + response.data.msg|| '未知错误')
            }
            alert('删除成功！')
            // 刷新表格
            loadAndRender(); // 重新加载数据，更新表格
        }).catch(error =>{
            alert('删除失败'+ error.message)
        })
    }
    // --------- 2️⃣ 把数组渲染成 HTML 表格 ----------
    /**
     * @param {Array<Object>} list
     * @returns {string} 表格HTML字符串
     */
    function buildTableHTML(list) {
        if (!list || list.length === 0) {
            return '<p>暂无数据</p>';
        }

        let html = '<table>';
        html += `
            <thead>
                <tr>
                    <th>#</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>职位</th>
                    <th>上级</th>
                    <th>入职日期</th>
                    <th>工资</th>
                    <th>部门号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
        `;

        list.forEach((emp, idx) => {
            html += `
                <tr>
                    <td>${idx + 1}</td>
                    <td>${emp.empno}</td>
                    <td>${emp.ename}</td>
                    <td>${emp.job}</td>
                    <td>${emp.mgr}</td>
                    <td>${emp.hiredate}</td>
                    <td>${emp.sal ?? ''}</td>
                    <td>${emp.deptno ?? ''}</td>
                    <td>
                        <button class="del-btn" data-empno="${emp.empno}">删除</button>
                        <a class="update-link" href="update.html?empno=` + emp.empno + `">修改</a>
                    </td>
                </tr>
            `;
        });

        html += '</tbody></table>';
        return html;
    }

    // --------- 3️⃣ 页面首次加载时请求数据 ----------
    function loadAndRender(empno = '') {
        document.getElementById('msg').textContent = '加载中...';
        fetchEmployeeList(empno)
            .then(list => {
                document.getElementById('msg').textContent = '';
                document.getElementById('showDate').innerHTML = buildTableHTML(list);
                // 为新生成的删除按钮绑定事件
                bindDeleteButtonEvents();
            })
            .catch(err => {
                console.error(err);
                document.getElementById('msg').textContent = '加载失败：' + err.message;
                document.getElementById('showDate').innerHTML = '';
            });
    }

    //  为所有删除按钮绑定点击事件,使用事件委托
    function bindDeleteButtonEvents(){
        //  找到表格内的所有删除按钮，并绑定事件
        const tableContainer = document.getElementById('showDate');
        tableContainer.addEventListener('click',function(event){
            if(event.target.classList.contains('del-btn')){
                const empno = event.target.dataset.empno;
                if(confirm('确定要删除员工工号为' + empno + '的员工吗？')){
                    deleteEmployee(empno)
                }
            }
        })
    }
    // 页面首次进入时自动加载全部数据
    window.onload = function () {
        loadAndRender();   // 不传参数 → 查询全部
    };

    // --------- 4️⃣ 搜索按钮的交互 ----------
    document.getElementById('searchBtn').addEventListener('click', function () {
        const kw = document.getElementById('searchInput').value.trim();
        loadAndRender(kw);   // 把搜索关键字传给后端
    });

    // 如果希望回车也能搜索，可以给输入框绑定 keyup 事件
    document.getElementById('searchInput').addEventListener('keyup', function (e) {
        if (e.key === 'Enter') {
            document.getElementById('searchBtn').click();
        }
    });
</script>
</body>
</html>
